<!--
 * 单元格组件
-->
<template>
    <page-layout class="page-layout">
        <!-- 基础使用 -->
        <app-demo-module title="基础使用">
            <pure-loading class="loading"></pure-loading>
        </app-demo-module>

        <!-- 提示文本 -->
        <app-demo-module title="提示文本">
            <pure-loading class="loading" text="加载中..."></pure-loading>
        </app-demo-module>

        <!-- 自定义图标 -->
        <app-demo-module title="自定义图标">
            <pure-loading class="loading" text="加载中..." iconName="__loading"></pure-loading>
            <app-gap size="10px"></app-gap>
            <pure-loading class="loading" text="加载中..." iconName="__shuaxin"></pure-loading>
            <app-gap size="10px"></app-gap>
            <pure-loading class="loading" text="加载中..." iconName="/static/logo.png"></pure-loading>
        </app-demo-module>

        <!-- 纵向布局 -->
        <app-demo-module title="纵向布局">
            <pure-loading class="loading" text="加载中..." iconName="__loading" vertical></pure-loading>
        </app-demo-module>
    </page-layout>
</template>

<script setup>
    import { ref, computed } from "vue";
</script>

<style scoped lang="scss"></style>
